import { useState } from "react";
import Card from "./Card/index";
type cardItem = {
  text: string;
  id: number;
};
const style = {
  width: "400px",
};

function Container() {
  const [cardList, setCardList] = useState<cardItem[]>([
    {
      id: 1,
      text: "卡片1",
    },
    {
      id: 2,
      text: "卡片2",
    },
    {
      id: 3,
      text: "卡片3",
    },
  ]);
  const moveCard = (dragIndex: number, hoverIndex: number) => {
    const dragCard = cardList[dragIndex];
    let cloneCards = [...cardList];
    cloneCards.splice(dragIndex, 1);
    cloneCards.splice(hoverIndex, 0, dragCard);
    setCardList(cloneCards);
  };
  return (
    <div style={style}>
      {cardList.map((item: cardItem, index: number) => {
        return (
          <Card
            moveCard={moveCard}
            name={item.text}
            id={item.id}
            index={index}
            key={item.id}
          />
        );
      })}
    </div>
  );
}

export default Container;
